我假設你已經會...

• 使用 CSS 定義樣式（選用適當的選擇器定義屬性與屬性值）
• 已配置 Sass 編譯 CSS 的開發環境（若還沒，使用線上編輯器 CodePen來體驗一波）

• Sass 是 CSS Preprocessor（CSS 預處理器）的一種
• 讓 CSS 設計過程能夠更加便利、有結構、更簡潔、更彈性
• 完成 SASS / SCSS 檔後需編譯為 CSS 檔

Sass 分兩種 - SASS & SCSS

• SASS （Indented Sass）
  不寫 { } 、不寫;
  縮進取代{ }，所以縮排相當重要、不可空錯
  不兼容CSS

  p
      color:black
      span
          color:red
  

• SCSS （Sassy CSS）
  一樣要寫{ }、;
  兼容CSS

  p{
      color:black;
      span{
          color:red;  
      }
  }
  

以下先就以SCSS的特色寫法做整理

1. 巢狀結構

基本-選擇器(selector)

• 當CSS這樣寫時

  #banner{
      //...A
  }
  #banner #logo{
      //...Aa
  }
  #banner #logo img{
      //...Aa1
  }
  #banner nav{
      //...Ab
  }
  

  可用SASS以巢狀寫 (下例為SCSS)

  #banner{
      ...
  
      #logo{    // 等同於 #banner #logo
          ...
  
          img{  // 等同於 #banner #logo img
              ...
          }
  
      }
  
      nav{     // 等同於 #banner nav
          ... 
      }
  }
  

& 連接

• 選擇器用**&符號接起父層**

  a{
      color:red; 
      &:hover{   //等同於　a:hover
          color:red;
      }
  
      &.active{  //等同於　a.active
          color:blue;
      }
  }
  

CSS屬性也可以巢狀

• 常見前綴相同的屬性如 background / border / font...

  .box{
       background: {
          image: url(/img/bg.jpg);
          repeat: repeat;
          position: top;
      }
       font: {
           size: 1rem;     //等同於font-size:...
           weight: bold;   //     font-weight:...
      }
  }
  

2. 變數 $

$變數: 值

• 例：色票管理

  $main-color: blue;
  $sub-color: gray;
  
  footer {
      background-color: $sub-color; 
      color: $main-color; 
  }
  p{
      color: $main-color; 
  }
  

• 變數內的值存數字／字串/布林/空/list/
  map(key1:value,key2:value...)　都可以

3. Mixin

基本用法

1. 用@mixin定義

   @mixin basic-space{
       padding: 1rem;
       margin: 1rem;
   }
   

2. @include 引用 mixin

   .box{
       @include basic-space
   }
   

• 適用於管理重複性的設計定義(模組化管理的概念)

使用參數更彈性

1. @mixin 定義一個mixin並帶入參數

   @mixin basic-space($mg, $pd){
       padding: $mg;
       margin: $pd;
   }
   

2. @include 引用 mixin並帶入參數

   .wrap{
       @include basic-space(0, 1rem);
   }
   .box{
       @include basic-space(1rem,  0.5rem);
   }
   

• 讓不同selector直接以不同的屬性值去引用同一個mixin

  

4. 繼承 @extend

基本用法-定義

1. %開頭來定義一段開放被繼承的類

   %basic-space{
       padding: 1rem;
       margin: 1rem;
   }
   

2. 用 @extend 來繼承

   .wrap{
       @extend %basic-space;
       background-color: red;
   
   }
   .box{
       @extend %basic-space;
       font-size: 1rem;
   }
   .footer{
       @extend %basic-space;
   }
   

• selector 將自動被組合起來:

  .wrap, .box, .footer {
    padding: 1rem;
    margin: 1rem;
  }
  
  .wrap {
    background-color: red;
  }
  
  .box {
    font-size: 1rem;
  }
  

• 與mixin意義不同:
  讓多個selector(如A、B、C)都繼承同一段stlye定義
  編譯出來的CSS檔中該style定義只會出現一段
  且為group selector**(A, B, C)**

  

直接繼承某個 selector

• 沒寫 % 預先定義、而是直接繼承於某個 selector

  .box {
      ...
  }
  
  .box-point {
      @extend .box;
      ...
  }
  

  

5. 運算符

• 基本加減乘除與變數運算

  $box-width: 10rem ;
  
  .box {
      width: $box-width;
      img {
          width: $box-width / 2;
      }
  }	
  

  

• 有限制的跨單位計算

  • 詳細參考大大文章

• 語法注意：運算符（加減乘除）兩邊要有空格

6. @import "_file"

• 透過**@import引入多個SCSS/SASS**

  使用情境例子：樣式依頁面或特殊需求拆分成多個SCSS檔，最後再統一import到一個SCSS檔，編譯時只編譯最終集成的這個SCSS檔生成單一個CSS檔（減少 Request 檔案數）*

  • 例如: 被拆分的數個CSS檔整合到 style.SCSS

  @import "reset"
  @import "layout"
  @import "product"
  @import "company"
  

    - 不打副檔名也OK，會自動抓同名的　　SASS檔或　SCSS　檔  
    - 只要監聽此檔即可,因**被引入的檔案會同時被監聽**
  

  • 編譯後的style.SCSS為被引入的所有檔的style

• SCSS　/　SASS檔名開頭為底線 _ 不編譯為CSS檔

7. 註解與編譯

• 多行註釋　/* .... */ 會編譯到CSS檔內

• 以及單行註釋/ ... / 不會編譯到CSS檔內

  

線上試試

若你還沒安裝好 Sass 應用環境也可以先使用線上 Editor 來體驗一下

• 線上 Editor 如 CodePen，設定參考:
  

• 或是將現有的CSS檔透過Converter感受一下簡化後的格式
  CSS 2 SASS/SCSS CONVERTER

CSS / SASS / SCSS

• SCSS- 則較接近原始CSS的語法，擴充了巢狀、mixin、extend...等功能。
• SASS- 比 SCSS 更簡化到 {　} 跟 ; 都省略，相對縮排必須變得嚴謹。
  • 少了{ }符，有些人認為這樣反而很難閱讀。
  • 另一個缺點是無法像 SCSS 一樣通用原生 CSS ，若需複製一段 CSS Code 時（例如使用瀏覽器開發者工具進行試調後、套用框架的範本 code… 等），還需先進行轉換或自行刪除分號與括號。
• CSS Preprocessor 只是為了加速開發的一種應用，使用原生 CSS 或利用 Preprocessor 開發，就看個人與開發團隊的開發習慣囉！

SASS 跟 SCSS 你比較偏好哪一種呢？歡迎留言分享看法喲！

參考資料

• SASSGuide
• SASS中文網
• SASS教學 ＋SCSS：CSS再進化，掌握語法攻略！
• SASS: 變數-運算單位

個人 Blog: https://eudora.cc/